<template>
	<el-dialog class="no-header-dialog" v-model="dialogShow" width="300">
		<div ref="downBox">
			<div class="padding-25">
				<el-image style="width: 250px; height: 250px" :src="currentRow.qrcodeUrl" fit="fill" />
				<!-- <img style="width: 250px; height: 250px" crossOrigin="anonymous" :src="currentRow.qrcodeUrl" /> -->
				<el-divider border-style="dashed" />
				<div class="line-height-s">{{typeName}}编号：{{ currentRow.deviceNum }}</div>
				<div class="zs-space-top line-height-s">{{typeName}}名称：{{ currentRow.deviceName }}</div>
				<div class="zs-space-top line-height-s">{{typeName}}位置：{{ currentRow.floorNum }}</div>
			</div>
		</div>
		<!-- <template #footer>
			<el-button class="zs-btn-md zs-btn-primary" @click="downLoad" v-btnPermi="{ permis: ['p_btn_property_project_device_list_add'], businessFlag: true }">下载</el-button>
		</template> -->
	</el-dialog>
</template>

<script setup>
	import html2canvas from 'html2canvas';
	import { ref, computed } from 'vue';
	const props = defineProps({
		currentRow: { type: Object },
		type: {type: String }
	});
	const dialogShow = ref(false);
	const downBox = ref();
	const downLoad = () => {
		html2canvas(downBox.value, {useCORS: true}).then(canvas => {
			const link = document.createElement('a'); // 创建一个超链接对象实例
			link.download = props.currentRow.deviceName + '.png'; // 设置要下载的图片的名称
			link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中
			link.click(); // 触发超链接的点击事件
		});
	};

	const typeName = computed(() => {
		return props.type == "water" ? "水表" : "电表"
	})

	defineExpose({ dialogShow });
</script>

<style scoped lang="scss">
	.padding-25{
		padding: 25px;
	}
</style>